<template>
	<view class="">
		<z-paging ref="paging" v-model="datalist"  @query="queryList">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="#ffffff" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16"><text class="text-color-regular">资金明细</text></view>
				</uni-nav-bar>
				<view class="mt-4 mx-16 mb-16">
					<view class="px-12 py-8 inline-flex item-center sel-btn" @click="showPop">
						<text class="fs-14 text-color-regular leading-20">全部账单</text>
						<image class="ml-2 size-8" src="@/pagesB/static/icon-down.svg"></image>
					</view>
				</view>
				<view class="h-1 bg-white"></view>
			</template>
			<view>
				<view v-for="(item,index) in datalist" :key="index">
					<view class="p-16 flex justify-between item-center">
						<view class="inline-flex item-center" @click="ishideList(item)">
							<text class="fs-16 text-color-regular">{{item.year}}年{{item.month}}月</text>
							<image class="w-10 h-5" src="@/pagesB/static/icon-kdow.svg" :class="{'icon-down':item.hide}"></image>
						</view>
						<view class="fs-12" style="color:#A7A7A7;">
							支出¥{{numberFormat(item.monthExpend)}} 收入¥{{numberFormat(item.monthIncome)}}
						</view>
					</view>
					<view class="bg-white px-12 py-8 radius-12 mx-16 mb-10" v-if="!item.hide" v-for="obj in item.subsidyBills" :key="obj.id">
						<view class="flex justify-between item-center leading-22 fs-16 font-semibold mb-8">
							<text class="text-color-regular">{{getTrade(obj)}}</text>
							<text class="color-primary">{{obj.tradeType===2?'-':'+'}}{{numberFormat(obj.tradeAmt)}}</text>
						</view>
						<!-- <view v-if="[1].includes(obj.tradeType)" class="mb-2 fs-12 text-color-hint">订单号：{{obj.orderNo}}</view> -->
						<view class="fs-12 text-color-hint">{{obj.createTime}}</view>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="bg-pop">
				<view class="pop-title">选项筛选</view>
				<view class="pop-bType">收支类型</view>
				<view class="flex flex-c">
					<view class="creat-w inline-flex center m-r-20" :class="{'sel-w':popParams.billType == ''}" @click="selbillType('')">全部</view>
					<view class="creat-w inline-flex center m-r-20" :class="{'sel-w':popParams.billType == 1}" @click="selbillType(1)">收入</view>
					<view class="creat-w inline-flex center m-r-20" :class="{'sel-w':popParams.billType == 2}" @click="selbillType(2)">支出</view>
				</view>
				<view class="pop-bType">交易类型</view>
				<view class="flex flex-c flex-wrap">
					<view class="creat-w inline-flex center m-r-20" :class="{'sel-w':popParams.tradeType == ''}" @click="selTradeType({value:''})">全部</view>
					<view class="creat-w inline-flex center m-r-20" v-for="obj in tradeType" :key="obj.value" :class="{'sel-w':popParams.tradeType == obj.value}" @click="selTradeType(obj)">{{obj.name}}</view>
				</view>
				<view class="flex item-center justify-center mb-20 mt-20">
					<view class="reset-btn" @click="reset">取消</view>
					<view class="submit-btn" @click="submitSearch">确定</view>
				</view>
			</view>
		
		</uni-popup>
	</view>
</template>

<script setup name="FundDetail">
	import { ref, unref, } from 'vue'
	import { useSubsidyStore } from '@/stores/modules/subsidy.js'
	import { numberFormat } from '@/utils/index.js'
	
	const subsidyStore = useSubsidyStore()
	
	const goBack = () => uni.navigateBack()
	const paging = ref()
	const datalist = ref([])
	const popup = ref()
	const tradeType = ref([
		{name:'补贴充值',value:1},
		{name:'补贴扣款',value:2},
		{name:'充值手续费',value:3},
		{name:'营销补贴服务费',value:4}
	])
	const getTrade = (item) => {
		let arr = tradeType.value.filter(obj => {return obj.value == item.tradeType})
		if(arr && arr.length){
			return arr[0].name
		}
		return ''
	}
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		billType:'',
		tradeType:''
	})
	const popParams = ref({
		billType:'',
		tradeType:''
	})
	const selTradeType = (obj) => {
		popParams.value.tradeType = obj.value
	}
	const selbillType = (text) =>{
		popParams.value.billType = text
	}

	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		subsidyStore.getSubsidyList(unref(queryParams))
			.then(res => {
				console.log('明细', res)
				paging.value.complete(res)
			})
	}
	const refresh = () => {
		paging.value.reload()
	}
	
	const reset = () => {
		popParams.value = {
			billType: queryParams.value.billType,
			tradeType: queryParams.value.billType
		}
		popup.value && popup.value.close('bottom')
	}
	const submitSearch = () => {
		popup.value && popup.value.close('bottom')
		queryParams.value = Object.assign(queryParams.value,popParams.value)
		refresh()
	}
	const ishideList = (item) => {
		item.hide = !item.hide?true:false
	}
	const showPop = () => {
		popup.value && popup.value.open('bottom')
	}
</script>
<style scoped lang="scss">
	.sel-btn{
		background-color: rgba(226, 226, 226, 1);
		border-radius: 40px;
		margin-top: 10px;
	}
	.icon-down {
		transform: rotate(180deg)
	}
	.bg-pop{
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: #ffffff;
		padding: 20px 10px;
		.pop-title{
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			color: #333333;
		}
		.pop-bType{
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: rgba(51, 51, 51, 0.6);
			margin: 20px 0 10px 0;
		}
		.creat-w{
			flex-shrink: 0;
			padding: 0 8px;
			width: 30%;
			// width: 204rpx;
			min-height: 88rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 8px;
			border: 2rpx solid rgba(245, 245, 245, 1);
			text-align: center;
			// line-height: 88rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 26rpx;
			&.sel-w{
				background-color: rgba(255, 238, 238, 1);
				color: rgba(250, 69, 67, 1);
				border-color: rgba(250, 69, 67, 1);
			}
		}
		.m-r-20{
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}
	.reset-btn,.submit-btn{
		background: rgba(245, 245, 245, 1);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 46px;
		text-align: center;
		height: 46px;
		width: 116px;
		border-radius: 8px;
	}
	.submit-btn{
		background: rgba(250, 69, 67, 1);
		color: #ffffff;
		margin-left: 10px;
	}
</style>
